<template>
  <div>
    <div class="title">
      <span style="margin-left:8px">FUJI NXTⅢ- 设备状态</span>
      <span class="title1">正常运行</span>
      <span class="title2">设备异常</span>
      <span class="title3">LOG异常</span>
    </div>
    <el-table :data="tableData" style="width: 100%" border :header-cell-style="headerStyleEvent"
      :cell-style="cellStyle">
      <el-table-column prop="lineId" label="LineId" width="80" align="center"></el-table-column>
      <el-table-column prop="lineName" label="产线名" width="100" align="center"></el-table-column>
      <el-table-column prop="machineId" label="机器ID" width="80" align="center"></el-table-column>
      <el-table-column prop="machineName" label="机器名" align="center"></el-table-column>
      <el-table-column prop="machineStatus" label="机器状态" align="center" width="120"></el-table-column>
      <el-table-column prop="baseIP" label="baseIP" :formatter="baseIP" align="center"
        show-overflow-tooltip></el-table-column>
      <el-table-column prop="baseType" label="base类型" :formatter="baseType" align="center"
        width="120"></el-table-column>
      <el-table-column prop="position" label="base位置" :formatter="position" align="center"
        width="120"></el-table-column>
      <el-table-column prop="moduleType" label="模组类型" :formatter="moduleType" align="center"></el-table-column>
      <el-table-column prop="machineType" label="机器类型" :formatter="machineType" align="center"></el-table-column>
      <el-table-column prop="position" label="模组位置" :formatter="modulePosition" align="center"></el-table-column>
      <el-table-column prop="moduleStatus" label="模组状态" :formatter="moduleStatus" align="center"
        show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" align="center" width="320">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="todevice">设备抛料</el-button>
          <el-button size="mini" type="primary" @click="toFeeder(row)">Feeder抛料</el-button>
          <el-button size="mini" type="primary" @click="toNozzle(row)">Nozzle抛料</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getNXTStatus, } from '@/network/nxt'
export default {
  name: 'nxt',
  props: {},
  // 数据
  data() {
    return {
      tableData: []
    }
  },

  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.getTableData()
  },

  computed: {},
  methods: {
    async getTableData() {
      try {
        const res = await getNXTStatus()
        console.log(res);
        this.tableData = res.data
      } catch (error) {
        console.log(error);
      }

    },
    headerStyleEvent() {
      return { background: '#eef1f6', color: '#606266' }
    },
    baseIP(row) {
      let arr = []
      row.bases.map(item => {
        arr.push(item.baseIP)
      });
      return arr.join(',')
    },
    baseType(row) {
      let arr = []
      row.bases.map(item => {
        arr.push(item.baseType)
      })
      return arr.join(',')
    },
    position(row) {
      let arr = []
      row.bases.map(item => {
        arr.push(item.position)
      })
      return arr.join(',')
    },
    moduleType(row) {
      let arr = []
      row.modules.map(item => {
        arr.push(item.moduleType)
      })
      return arr.join(',')
    },
    machineType(row) {
      let arr = []
      row.modules.map(item => {
        arr.push(item.machineType)
      })
      return arr.join(',')
    },
    modulePosition(row) {
      let arr = []
      row.modules.map(item => {
        arr.push(item.position)
      })
      return arr.join(',')
    },
    moduleStatus(row) {
      let arr = []
      row.modules.map(item => {
        arr.push(item.moduleStatus)
      })
      return arr.join(',')
    },
    todevice() {
      this.$router.push('device')
    },
    toFeeder(row) {
      console.log(row);
      this.$router.push({
        name: 'feeder',
        params: {
          machineId: row.machineId
        }
      })
    },
    toNozzle(row) {
      this.$router.push({
        name: 'nozzle',
        params: {
          machineId: row.machineId
        }
      })
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 4) {
        if (row.machineStatus == 'running') {
          return { backgroundColor: "#2e8838" };
        } else if (row.machineStatus == 'error') {
          return { backgroundColor: '#ed3d1d' }
        } else if (row.machineStatus == 'warning') {
          return { backgroundColor: '#eeeb10' }
        }
      }
    }
  }
}
</script>
<style scoped>
.title {
  background-color: #2f2e2e;
  color: white;
  font-size: 23px;
  line-height: 40px;
  height: 40px;
}

.title1 {
  background-color: #2e8838;
  font-size: 16px;
  margin-left: 5px;
}

.title2 {
  background-color: #ed3d1d;
  font-size: 16px;
  margin-left: 5px;
}

.title3 {
  background-color: #eeeb10;
  font-size: 16px;
  color: #2f2e2e;
  margin-left: 5px;
}
</style>